
<template>
  <div>
    <el-dialog
      :title="this.$t('common.modify')"
      :visible.sync="Visible"
      width="500px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="dialogBox">
        <div class="dialogBoxItem">
          <div style="width:100%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('MallManagementLang.mall_name_zh')}}:
            </div>
            <div class="contant">
              
              <el-input
                ref="name"
                @blur="handleBlur('name',$event)"
                @focus="handleFocus($event)"
                :placeholder="$t('common.input_plactholder')"
                v-model="data.name"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="dialogBoxItem">
          <div style="width:100%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('MallManagementLang.domain_name')}}:
            </div>
            <div class="contant">
              
              <el-input
                ref="domain_name"
                @blur="handleBlur('domain_name',$event)"
                @focus="handleFocus($event)"
                :placeholder="$t('common.input_plactholder')"
                v-model="data.domain_name"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="dialogBoxItem">
          <div style="width:100%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('MallManagementLang.binding_category')}}:
            </div>
            <div class="contant">
              <el-select
                ref="uid_type"
                filterable
                @blur="handleBlur('uid_type', $event)"
                @change="handleChang('uid_type')"
                v-model="data.uid_type"
                :placeholder="$t('common.select_plactholder')"
              >
                <el-option
                  v-for="item in oprions_type"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="dialogBoxItem">
          <div style="width:100%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('MallManagementLang.binding')}}:
            </div>
            <div class="contant">
              <Loadselect
                  ref="uid"
                  :select_value="'uid'"
                  :select_label="'name'"
                  :modalName="'uid'"
                  :select_model="data.uid"
                  :select_options="options_customer"
                  @selectBlur="selectBlur('uid')"
                  @selectChang="LoadselectChange"
                  :isLazy="true"
                  @loadData="loadData"
                  @filterDataFun="filterDataFun"
                >
                </Loadselect>
            </div>
          </div>
        </div>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="confirm" size="small">{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
    // 接收绑定参数
    
  },
  data() {
    return {
      Visible: false,
      code:'',
      data: {
        name:"",
        domain_name:"",
        uid_type:'',
        uid:"",
      },
      oprions_type:[],
      loadSelectPageInfo:{
        keyword:'',
        limit:100,
        page:1,
        page_all:10,
      },
      options_customer:[],
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
   
  },
  mounted() {},
  watch: {},
  methods: {
    init(data) {
      this.code=data.code
      this.getOptions()
      this.getData()
      this.Visible = true;
    },
    //获取下拉单数据
    getOptions(){
      this.$get("getMallUserType").then((res) => {
        this.oprions_type = res.data;
      });
      this.options_customer=[]
    },
    //获取单条
    getData() {
      this.$get("mallInfo", { code: this.code }).then((res) => {
        this.data.name = res.data.name;
        this.data.uid_type = res.data.uid_type;
        this.handleChang('uid_type')
        this.data.uid=res.data.uid
      });
    },
    loadData(){
      if(this.loadSelectPageInfo.page<this.loadSelectPageInfo.page_all){
        this.loadSelectPageInfo.page++
        this.$get(this.data.uid_type==1?"childMembers":"screenChilds",{parallel_account:1,name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
          this.options_customer.push(...res.data)
        });
      }
    },
    filterDataFun(value){
      this.loadSelectPageInfo.page=1
      this.loadSelectPageInfo.keyword=value
      this.$get(this.data.uid_type==1?"childMembers":"screenChilds",{parallel_account:1,name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
        this.options_customer = res.data;
        this.loadSelectPageInfo.page_all=res.pageinfo.page_all
      });
    },
    //自定义多选下拉框
    selectBlur(name){
      this.loadSelectPageInfo={
        keyword:'',
        limit:100,
        page:1,
        page_all:10,
      }
      this.filterDataFun('')
      if (this.data[name] === ""||!this.data[name]&&this.data[name]!==0) {
        this.$refs[name].$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid red";
      }
    },
    LoadselectChange(obj){
      this.data[obj.name]=obj.value
      if (this.data[obj.name].length===0) {
        this.$refs[obj.name].$el.childNodes[0].childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[obj.name].$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
    // 提交
    confirm() {
      //是否有空值必选项标识
      let type = true;
      //输入框判断是否有值
      if(!this.data.name){
        this.$refs.name.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.domain_name){
        this.$refs.domain_name.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if (!this.data.uid_type&&this.data.uid_type!==0) {
        this.$refs.uid_type.$el.childNodes[1].childNodes[1].style.border ="1px solid red";
        type = false;
      }
      if (!this.data.uid&&this.data.uid!==0) {
        this.$refs.uid.$el.childNodes[0].childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000);
        let params = new FormData();
        params.append("code", this.code);
        params.append("name", this.data.name);
        params.append("domain_name", this.data.domain_name);
        params.append("uid_type", this.data.uid_type);
        params.append("uid", this.data.uid);
        this.$postForm("editMall", params).then((res) => {
          this.confirmTrue = true;
          if(res.success){
            this.$message.success(res.msg);
            this.$emit("success");
            this.cancel()
          }
        });
      }
    },
    //取消
    cancel() {
      this.data = {
        name:'',
        domain_name:"",
        uid_type:"",
        uid:"",
      };
      this.Visible = false;
      
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
          event.target.style.border = "1px solid red";
        }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    //下拉框有值后边框变色
    handleChang(data) {
      if(data=='uid_type'){
        if(this.data.uid_type==2){
          this.$get("screenChilds",{parallel_account:1,name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
            this.options_customer = res.data;
            this.loadSelectPageInfo.page_all=res.pageinfo.page_all
          });
        }else if(this.data.uid_type==1){
          this.$get("childMembers",{parallel_account:1,name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
            this.options_customer = res.data;
            this.loadSelectPageInfo.page_all=res.pageinfo.page_all
          });
        }
        this.data.uid=''
      }
      if (this.data[data].length==0) {
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
  },
};
</script>

<style scoped lang="less" >
  .dialogBox .dialogBoxItem .dialogBoxItemRow{
    width: 23%;
  }
  /deep/ .el-dialog__wrapper{
    .el-dialog{
      min-width: 500px;
    }
  }
  .iphoneClass{
    position: relative;
    /deep/.el-input__inner{
      padding-left: 105px;
    }
    /deep/.el-input-group__prepend{
      position: absolute;
      width: 100px;
      top: 1px;
      left: 2px;
      border: 0;
      height: 32px;
      padding: 0;
    }
  }
  .accountTitle{
    display: flex;
    align-items: center;
    justify-content: center;
    /deep/.el-popover__reference{
      height: 34px;
    }
    img{
      width: 25px;
      height: 25px;
      border-radius: 50%;
    }
  }
</style>